<template>
  <div class="tree-table">
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      height="400px"
      @expand-change="expandChange"
      ref="elTable"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      @current-change="currentChange"
      :current-page="paginator.num"
      @size-change="sizeChange"
      :page-sizes="[5, 10, 20]"
      :page-size="paginator.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginator.count"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paginator: {
        num: 1,
        size: 5,
        count: 0,
      },
      tableData: [],
    };
  },
  created() {
    const data = [
      {
        id: 1,
        date: "2016-05-02",
        name: "王五",
        address: "重庆市",
        children: [
          {
            id: 10,
            date: "2016-05-02",
            name: "王五",
            address: "重庆市江北区观音桥",
          },
          {
            id: 11,
            date: "2016-05-01",
            name: "王五",
            address: "重庆市渝中区解放碑",
          },
          {
            id: 12,
            date: "2016-05-01",
            name: "王五",
            address: "重庆市南岸区重庆邮电大学",
          },
          {
            id: 13,
            date: "2016-05-01",
            name: "王五",
            address: "沙坪坝",
          },
          {
            id: 14,
            date: "2016-05-01",
            name: "王五",
            address: "磁器口",
          },
          {
            id: 15,
            date: "2016-05-01",
            name: "王五",
            address: "老君洞",
          },
        ],
      },
      {
        id: 2,
        date: "2016-05-04",
        name: "赵六",
        address: "上海市浦东区",
      },
      {
        id: 3,
        date: "2016-05-01",
        name: "田七",
        address: "上海市普陀区金沙江路 1519 弄",
        children: [
          {
            id: 31,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 32,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 33,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 34,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 35,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 36,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ],
      },
      {
        id: 4,
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄",
        children: [
          {
            id: 3111,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 3211,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 3311,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 3411,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 3511,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 3611,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ],
      },
    ];
    this.tableData = data;
  },
  methods: {
    expandChange() {
      this.$nextTick(() => {
        this.paginator.count = this.$common.treePaging(this.paginator);
        this.$refs.elTable.doLayout();
      });
    },
    //每页显示页数
    sizeChange(e) {
      this.$set(this.paginator, "size", e);
      this.$nextTick(() => {
        this.$common.treePaging(this.paginator);
        this.$refs.elTable.doLayout();
      });
    },
    //当前第几页
    currentChange(e) {
      this.$set(this.paginator, "num", e);
      this.$nextTick(() => {
        this.$common.treePaging(this.paginator);
        this.$refs.elTable.doLayout();
      });
    },
  },
};
</script>

<style>
.tree-table {
  overflow: hidden;
}
.tree-tr {
  display: none;
}
</style>
